<template>
	<el-container>
		<el-aside class="nopadding treesearch" style="width: 300px;background-color: #fff;">
			<ex-search-tree ref="searchTree" :defaultwidth="300" :treeApi="this.$API.system.dept.treeData" @changeHandler="searchTreeHandler" :param="{}" :title="title"></ex-search-tree>
    	</el-aside>
		<el-container>
			<el-header>
				<div class="left-panel">
					<fsButton ref="button" plain size="default" :buttons="buttons" @clickHandler="buttonHandler"></fsButton>
				</div>
				<div class="right-panel">
					<ex-search ref="search" :searches="searches" @searchOk="searchHandler" default-code="userName" placeholder="请输入操作员名称"></ex-search>
				</div>
			</el-header>
			<el-main class="nopadding">
				<ex-table id="userTable" ref="table" :columns="columns" :url="this.$API.system.operator.list.url" :refs="this.$refs" search="search"  :params="{userType:'operator'}"
				@columnClick="columnClickHandler"
				@checkClick="checkClickHandler"></ex-table>
			</el-main>
		</el-container>
	</el-container>


	<save-dialog ref="saveDialog" @success="searchHandler"/>
	<view-dialog ref="viewDialog"/>

  </template>

  <script>
  import saveDialog from './save'
  import viewDialog from './view'
  import ExTable from "@/components/exTable/index.vue";
  import ExSearch from "@/components/exSearch/index.vue";
  import ExSearchTree from "@/components/exSearchTree/index.vue";
  import {h} from "vue";
  import {ElContainer} from "element-plus";
  import tool from "@/utils/tool";
  import ExLabel from "@/components/exLabel/index.vue";
  import BaseTemplate from "@/utils/baseTemplate";

  export default {
	name: '操作员管理',
	components: {
	  viewDialog,
	  ExSearchTree,
	  ExSearch,
	  ExTable,
	  saveDialog,
	},
	data() {
	  return {
		buttons: [
        {name: this.$t('button.add'), icon: "el-icon-plus", click: "add", width:"70px",permission:"add"},
        {name: this.$t('button.edit'), icon: "el-icon-edit", type: "parent",parent:true,show:"none",width:"70px",
        childrenbuttons:[
          //{name: this.$t('button.edit'),  click: "edit",permission:"edit"},
          {name: this.$t('button.delete'),  click: "del",permission:"delete"},
          {name: this.$t('button.enabled'),  click: "enabled",permission:"enabled"},
          {name: this.$t('button.disabled'),  click: "disabled",permission:"disabled"},
        ]},
        {name: "...", type: "parent",parent:true,permission:"export",
        childrenbuttons:[
          {name: this.$t('button.export'),  click: "export",permission:"export"},
        ]},
      ],
		searches: [
		  { type: "input", name: "操作员名称", code: "userName", placeholder: "请输入操作员名称", maxlength: 30, showLimit: true},
		  { type: "input", name: "操作员编码", code: "userCode", placeholder: "请输入操作员编码", maxlength: 30, showLimit: true},
		  {type: "radio", name: "是否可用", code: "isEnabled",dictCode:'IS_ENABLED'},
		  {type: "select", name: "角色", code: "roleIdList",dictCode:'SysRole',priKey:true,multiple:true},
		  {type: "switch", name: "只查在线", code: "onlineStatus",ops:['0','1']},
      { type: "datetimerange", name: "活跃时段", code: "activeTimeStart,activeTimeEnd",startPlaceholder:"请输入开始时间", endPlaceholder: "请输入结束时间", format: "YYYY-MM-DD HH:mm:ss",valueFormat:"YYYYMMDDHHmmss"},
		],
		columns: [
		{code: "操作", name: "操作", width: "100",
      click:[{label:"",icon:"el-icon-edit-pen",event:'detailedit',permission: "edit"},
      {label:"",icon:"el-icon-delete",event:'detaildel',permission: "delete"}]},
		  {code: "userName", name: "名称", width: "120",color:'red',click:"show1"},
		  {code: "userCode", name: "编码", width: "120", sortable: true},
		  {code: "loginName", name: "登录账号", width: "120"},
      {code: "orgId", name: "所在部门", width: "200",formatter:"DICT",key:"SysOrganization"},
		  {code: "employee.roleIds", name: "拥有角色", width: "",formatter: function(row,value,_this){
				  let children = [];
				  if(Array.isArray(value)){
					  value.forEach(roleId=>{
						  children.push(h(ExLabel, {key:roleId,code: 'SysRole',value:roleId,bool:true}));
					  });
					  return h(ElContainer, {key:value,style: {display: 'flex'}}, () => children);
				  }
				 return null;
			  }},
		  // {code: "mobile", name: "用户手机号", width: ""},
		  // {code: "email", name: "用户邮箱", width: ""},
		  // {code: "description", name: "描述", width: ""},
		  {code: "isEnabled", name: "是否可用", width: "100", sortable: true, formatter: "DICT", key: "IS_ENABLED"},
		  {code: "onlineStatus", name: "当前在线状态", width: "140", sortable: true, formatter: "DICT", key: "ON_LINE_STATUS"},
		  // {code: "createUser", name: "创建人", width: "100", formatter: "DICT", key: "SysUser"},
		  // {code: "createTime", name: "创建时间", width: "175", sortable: true, formatter: "DATETIME"},
		],
		  orgId: null,
		  title:"操作员管理"
	  }
	},
	created() {
	},
	mounted() {
	},
	methods: {
		checkClickHandler(value) {
      if(value==0){
        for (let index = 0; index < this.buttons.length; index++) {
          if(this.buttons[index].show!=undefined){
            this.buttons[index].show="none"
          }
        }
      }else{
        for (let index = 0; index < this.buttons.length; index++) {
          if(this.buttons[index].show!=undefined){
          this.buttons[index].show=""
          }
        }
      }
    },
	  buttonHandler(index, name) {
		this.$options.methods[name](this, index);
	  },
		async searchTreeHandler(data) {
			this.orgId = data.id;
			let queryParams = {orgId: this.orgId}
			await this.$refs.table.refresh(queryParams);
		},
	  async searchHandler() {
		let queryParams = {orgId: this.orgId}
		await this.$refs.table.refresh(queryParams);
	  },
	  columnClickHandler(name,data){
		this.$options.methods[name](this, data);
	  },
	  //添加
	  add(_this) {
		let parentCode;
		let selections = _this.$refs.table.selections();
		if(selections.length>0){
		  parentCode = selections[0].levelCode;
		}else{
		  parentCode = _this.parentLevelCode;
		}
		let data = {
		  parentLevelCode: parentCode,
		  entityName:_this.$CONSTANT.entity.SysUser.name,
		};
		_this.$nextTick(() => {
		  _this.$refs.saveDialog.open(data);
		})
	  },
	  //编辑
	  edit(_this) {
		let row = _this.$refs.table.selectionOne();
		if (!row) {
		  return;
		}
		_this.$nextTick(() => {
		  _this.$refs.saveDialog.open(row);
		})
	  },
	   //单个编辑
	   detailedit(_this,row) {
      _this.$nextTick(() => {
        _this.$refs.saveDialog.open(row);
      })
    },
	  //查看
	  show(_this) {
		let row = _this.$refs.table.selectionOne();
		if (!row) {
		  return;
		}
		_this.$nextTick(() => {
		  _this.$refs.viewDialog.open(row);
		})
	  },
	  //查看
	  show1(_this,row) {
		_this.$nextTick(() => {
		  _this.$refs.viewDialog.open(row);
		})
	  },
	  //导出
	  async export(_this,index) {
      let attachParams = {};
      let exportApi =  _this.$API.system.operator.export;
      let exTableRef = _this.$refs.table;
      let exportBtnRef = _this.$refs.button;
      let exportBtnIndex = index;
      await BaseTemplate.export(_this, exportApi, attachParams, exportBtnRef, exportBtnIndex, exTableRef);
	  },
	  //批量删除
	  del(_this, index) {
		let selections = _this.$refs.table.selections();
		if (selections.length === 0) {
		  _this.$message.warning(_this.$t("common.please_select_data"));
		  return;
		}
		_this.$confirm(`确定删除选中的 ${selections.length} 项吗？如果删除项中含有子集将会被一并删除`, _this.$t('common.warn'), {
		  type: 'warning'
		}).then(async () => {
		  _this.$refs.button.loading(index, true);
		  var delarray = [];
		  for (let index = 0; index < selections.length; index++) {
			const element = selections[index];
			delarray.push(element.id);
		  }
		  var res = await _this.$API.system.operator.deleteByIds.post(delarray);
		  if (res.code === 2000) {
			_this.$message.success(_this.$t("code."+res.code));
			_this.searchHandler();
			_this.$store.dispatch("commit",selections[0].entityName);
		  }
		  _this.$refs.button.loading(index, false);
		}).catch(() => {
		  _this.$refs.button.loading(index, false);
		});
	  },
	   //单个删除
   detaildel(_this, row) {
      let selections = [];
      selections.push(row);
		_this.$confirm(`确定删除选中的 ${selections.length} 项吗？如果删除项中含有子集将会被一并删除`, _this.$t('common.warn'), {
		  type: 'warning'
		}).then(async () => {
		  var delarray = [];
		  for (let index = 0; index < selections.length; index++) {
			const element = selections[index];
			delarray.push(element.id);
		  }
		  var res = await _this.$API.system.operator.deleteByIds.post(delarray);
		  if (res.code === 2000) {
			_this.$message.success(_this.$t("code."+res.code));
			_this.searchHandler();
			_this.$store.dispatch("commit",selections[0].entityName);
		  }
		}).catch(() => {
		});
	  },
	  //批量启用
	  enabled(_this, index) {
		let selections = _this.$refs.table.selections();
		if (selections.length === 0) {
		  _this.$message.warning(_this.$t("common.please_select_data"));
		  return;
		}
		_this.$confirm(`确定启用选中的 ${selections.length} 项吗？`, _this.$t('common.warn'), {
		  type: 'warning'
		}).then(async () => {
		  _this.$refs.button.loading(index, true);
		  var delarray = [];
		  for (let index = 0; index < selections.length; index++) {
			const element = selections[index];
			delarray.push(element.id);
		  }
		  var res = await _this.$API.system.operator.enabled.post(delarray);
		  if (res.code === 2000) {
			_this.$message.success(_this.$t("code."+res.code));
			_this.searchHandler();
			_this.$store.dispatch("commit",selections[0].entityName);
		  }
		  _this.$refs.button.loading(index, false);
		}).catch(() => {
		  _this.$refs.button.loading(index, false);
		});
	  },
	  //批量禁用
	  disabled(_this, index) {
		let selections = _this.$refs.table.selections();
		if (selections.length === 0) {
		  _this.$message.warning(_this.$t("common.please_select_data"));
		  return;
		}
		_this.$confirm(`确定禁用选中的 ${selections.length} 项吗？`, _this.$t('common.warn'), {
		  type: 'warning'
		}).then(async () => {
		  _this.$refs.button.loading(index, true);
		  var delarray = [];
		  for (let index = 0; index < selections.length; index++) {
			const element = selections[index];
			delarray.push(element.id);
		  }
		  var res = await _this.$API.system.operator.disabled.post(delarray);
		  if (res.code === 2000) {
			_this.$message.success(_this.$t("code."+res.code));
			_this.searchHandler();
			_this.$store.dispatch("commit",selections[0].entityName);
		  }
		  _this.$refs.button.loading(index, false);
		}).catch(() => {
		  _this.$refs.button.loading(index, false);
		});
	  },
	}
  }
  </script>
